import React, { useState } from 'react';

const App = () => {
  // 定义一个状态来保存当前页面的内容
  const [content, setContent] = useState('default');

  // 处理按钮点击的函数
  const handleButtonClick = (newContent) => {
    setContent(newContent);
  };

  return (
    <div>
      <h1>React 多按钮共用页面示例</h1>
      
      <div>
        <button onClick={() => handleButtonClick('content1')}>按钮1</button>
        <button onClick={() => handleButtonClick('content2')}>按钮2</button>
        <button onClick={() => handleButtonClick('content3')}>按钮3</button>
      </div>
      
      <div style={{ marginTop: '20px', padding: '20px', border: '1px solid black' }}>
        {content === 'default' && <p>请选择一个按钮来查看内容。</p>}
        {content === 'content1' && <p>这是按钮1的内容。</p>}
        {content === 'content2' && <p>这是按钮2的内容。</p>}
        {content === 'content3' && <p>这是按钮3的内容。</p>}
      </div>
    </div>
  );
};

export default App;
